<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
     <style>
         ul li{
             float: right;
             padding: 30px;
         }
         img {
             width: 1000px;
             height: 200px;
         }
         body{
             height: 2000px;
         }
         *{
             padding: 0;
             margin: 0;
         }
        
         .fixed{
             position: fixed;
             top: 0;
             left: 0;
             
         }
         .d{
             height: 100px;
         }
       
.top{
    vertical-align: top;
}



     </style>
</head>
<body>
    <div class="d" id="topPart">
        <img src="/3.jpg" alt="">
    </div>
    <div  id="bannerPart" position="fixed">
        <img src="/1.jpg" alt=""> 
       
    </div>
    <div class="main" id="mainPart">
        <img src="/3.jpg" alt="">
    </div>

       
         <script>
             $(function()
             {
                 $(window).scroll(function()
                 {
                     //  alert($(window).scrollTop());
                  //   alert()
                     if($(window).scrollTop()>=$(".d").height())
                     {
                         // alert("sss")
                         $("#bannerPart").addClass("fixed")
                        $("#main").css("marginTop",$("#bannerPart").height+10);
                     }
                     else{
                        $("#bannerPart").removeClass("fixed");
                         $("#mainPart").css("marginTop",100);
                     }
                 })
             })
         </script>        
           

</body>
</html>